<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 查询计价器当前版本</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="110px" label-position="left" >
                <el-row :gutter="20">
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="计价器厂商名称">
                            <el-select class="handle-select" v-model="form.factname" clearable placeholder="请选择"  @change="currentSel">
                                <el-option
                                        v-for="item in factnameselectList"
                                        :key="item.id"
                                        :label="item.factname"
                                        :value="item.factname"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="计价器型号">
                            <el-select class="handle-select" v-model="form.jjqtype" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in jjqtypeselectList"
                                        :key="item.id"
                                        :label="item.jjqtype"
                                        :value="item.jjqtype"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="价格类别">
                            <el-select class="handle-select" v-model="form.pricetype" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in pricetypeselectList"
                                        :key="item.id"
                                        :label="item.pricetype"
                                        :value="item.pricetype"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                    </div></el-col>

                    <!-- 统计弹出框 -->
                    <el-dialog title="统计" :visible.sync="chartVisible" width="43%" @close='closeDialog' >
                            <!--<div class="content-title"></div>-->
                            <schart class="schart" canvasId="pie" :data="chartdata" type="pie" :options="chartoptions"></schart>

                        <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit('form3')">确 定</el-button>
            </span>
                    </el-dialog>
                    <el-col :span="12"><div class="grid-content bg-purple-light" >
                        <el-form-item label="版本号">
                            <el-select class="handle-select" v-model="form.version" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in versionselectList"
                                        :key="item.id"
                                        :label="item.version"
                                        :value="item.version"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="出租车公司名称" v-if="isshow">
                            <el-select class="handle-select" v-model="form.companyname" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in companynameselectList"
                                        :key="item.id"
                                        :label="item.companyname"
                                        :value="item.companyname"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车牌号">
                            <el-input class="handle-input" clearable v-model="form.carno"></el-input>
                        </el-form-item>
                        <!--<el-form-item label="GPS终端号">-->
                        <!--<el-input class="handle-input" v-model="form.gpsnum"></el-input>-->
                        <!--</el-form-item>-->
                        <el-button type="primary" icon="delete" style="margin-left: 30% ;margin-top: 8%" class="mr10" @click="search">查询</el-button>
                        <el-button type="primary" icon="delete" style="margin-top: 8%" class="mr10" @click="all">显示全部</el-button>
                        <el-button type="primary" icon="delete" style="margin-top: 8%" class="mr10" @click="chart">版本统计</el-button>

                    </div>
                    </el-col>
                </el-row>



            </el-form>
            <el-table :data="tableData" border  v-loading="listLoading" class="table" stripe>
                <el-table-column prop="factname" label="计价器厂商名称" >
                </el-table-column>
                <el-table-column prop="jjqtype" label="计价器型号" >
                </el-table-column>
                <el-table-column prop="pricetype" label="价格类别" >
                </el-table-column>
                <el-table-column prop="carno" label="车牌号" >
                </el-table-column>
                <el-table-column prop="companyname" label="出租车公司名称" >
                </el-table-column>
                <el-table-column prop="version" label="当前计价器内版本号" >
                </el-table-column>
                <el-table-column prop="sfzx" label="是否最新">
                </el-table-column>
            </el-table>
            <el-col :span="24" class="toolbar pageBar">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout=" prev, pager, next, sizes, total"
                        :total="total">
                </el-pagination>
            </el-col>
        </div>
    </div>
</template>



<script>
    import Schart from 'vue-schart';

    export default {
        name: 'Search',
        components: {
            Schart
        },
        data() {
            return {
                url: this.GLOBAL.url,
                // url:"/api",
                tableData: [],
                addData1:[],
                addData2:[],
                currentPage: 1,
                total: 0,
                page: 1,
                pageSize: 10,
                pageNum:1,
                totalnum:0,
                totalpage:1,
                factnameselectList:[],
                jjqtypeselectList:[],
                companynameselectList:[],
                pricetypeselectList:[],
                versionselectList:[],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                listLoading: false,
                isshow:false,
                chartVisible:false,
                form: {
                    factname: '',
                    carno: '',
                    companyname: '',
                    jjqtype: '',
                    pricetype: '',
                    version:''
                },
                newform:{name:'最新版本',value:''},
                notnewform:{name:'非最新版本',value:''},
                chartdata : [],

                chartoptions: {
                    title: '版本信息统计',
                    bgColor: '#ffffff',
                    titleColor: '#000000',
                    legendColor: '#000000',
                    radius: 120,
                    colorList: ['#1E9FFF','#F7BA2A','#13CE66','#FF4949','#72f6ff'],
                },
            }



        },
        created() {
            // this.getData();
            this.gettable();
        },

        methods: {

            //改变时
            handleSizeChange(val) {
                this.pageSize = val;
                console.log(this.pageSize);
                this.getData();
            },
            //条目改变时
            handleCurrentChange(val) {
                this.pageNum = val;
                console.log(this.pageNum);
                this.getData();
            },

            gettable(){
                this.listLoading = true;

                this.$axios({
                    method: 'post',
                    url: this.url+"/user/userview"
                }).then((res) => {
                    this.form.companyname = res.data.companyname;
                    if(this.form.companyname=='全部'){
                        this.isshow = true;
                        this.form.companyname=''
                    }
                    this.$axios({
                        method: 'post',
                        url: this.url+"/search/all?pageNum="+this.pageNum+"&pageSize="+this.pageSize,
                        data:this.form
                    }).then((res) => {
                        this.tableData = res.data.list;
                        this.total = res.data.totalnum;
                        this.page = res.data.totalpage;
                        this.listLoading = false;
                    });


                });


                this.$axios({
                    method: 'get',
                    url: this.url+"/fact/list",
                }).then((res) => {
                    this.factnameselectList = res.data;
                });
                this.$axios({
                    method: 'get',
                    url: this.url+"/price/list",
                }).then((res) => {
                    this.pricetypeselectList = res.data;
                });
                this.$axios({
                    method: 'get',
                    url: this.url+"/taximetertype/list",
                }).then((res) => {
                    this.jjqtypeselectList = res.data;
                });
                this.$axios({
                    method: 'get',
                    url: this.url+"/company/list",
                }).then((res) => {
                    this.companynameselectList = res.data;
                });
                this.$axios({
                    method: 'get',
                    url: this.url+"/paramfile/list",
                }).then((res) => {
                    this.versionselectList = res.data;
                });

            },
            //获取列表数据
            getData() {
                this.listLoading = true;

                    this.$axios({
                        method: 'post',
                        url: this.url+"/search/all?pageNum="+this.pageNum+"&pageSize="+this.pageSize,
                        data:this.form
                    }).then((res) => {
                        this.tableData = res.data.list;
                        this.total = res.data.totalnum;
                        this.page = res.data.totalpage;
                        this.listLoading = false;
                    });




            },
            currentSel(selVal){
                if( this.form.jjqtype !== ''){
                    this.form.jjqtype = '';
                }


                if(selVal!==null&&selVal!==''){
                    this.$axios({
                        method: 'post',
                        url: this.url+"/taximetertype/factjjqtype?factname="+selVal,
                    }).then((res) => {
                        this.jjqtypeselectList = res.data;
                    });
                }else {
                    this.$axios({
                        method: 'get',
                        url: this.url+"/taximetertype/list",
                    }).then((res) => {
                        this.jjqtypeselectList = res.data;
                    });
                }

            },

            search(){
                this.is_search = true;
                this.getData();
            },

            chart(){
              this.chartVisible = true;
              console.log(this.form.companyname);
                this.$axios({
                    method: 'post',
                    url: this.url+"/search/notnewnum?companyname="+this.form.companyname,
                }).then((res) => {
                    this.chartdata.push({
                        name:'非最新版本',value:res.data
                    });
                });
                this.$axios({
                    method: 'post',
                    url: this.url+"/search/newnum?companyname="+this.form.companyname,
                }).then((res) => {
                    this.chartdata.push({
                        name:'最新版本',value:res.data
                    });
                    // this.newform.value = res.data;
                });


                // console.log( this.newform)
                //
                // this.chartdata.push({
                //     name:'最新版本',value:
                // });
                // this.chartdata.push(this.notnewform);

                // console.log( this.chartdata)


            },
            closeDialog(){
                this.chartdata = [];
            },

            all(){

                this.$axios({
                    method: 'post',
                    url: this.url+"/user/userview"
                }).then((res) => {
                    if(res.data.companyname == '全部') {
                        this.form.companyname="";
                    }
                    this.is_search = false;
                    this.form.jjqtype = "";
                    this.form.pricetype = "";
                    this.form.factname = "";
                    this.form.carno = "";
                    this.form.version='';
                    this.getData();
                });


            },
            filterTag(value, row) {
                return row.tag === value;
            }
        }
    }

</script>

<style>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 300px;
    }
    .handle-add-select {
        width: 200px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .handle-add-input {
        width: 200px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        margin-top: 10px;
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
        width: 80px;
    }
    .customWidth{
        width:80%;
    }
    .schart{
          width: 500px;
          height: 400px;
      }
    .content-title{
        clear: both;
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }

</style>
